<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <p id="pCountDown">倒计时</p>
    <button id="btn">开始倒计时</button>

    <script>
      /* 计算两个date对象的时差 以【xx天xx小时xx分xx秒】形式返回 */
      function getTimeDiffer(
        endDate,
        startDate = new Date() /* 开始时间默认使用当前时间 */
      ) {
        // 获得两个date的时间毫秒之差
        var millisDiffer = endDate - startDate;

        // 从事件毫秒差中拿出完整的天数
        var days = parseInt(millisDiffer / (24 * 3600 * 1000));

        // 从事件毫秒差中拿出完整的小时数
        var oddMillis = millisDiffer % (24 * 3600 * 1000); //半天的毫秒数
        var hours = parseInt(oddMillis / (3600 * 1000)); //半天中的完整小时数

        // 从事件毫秒差中拿出完整的分钟数
        oddMillis = millisDiffer % (3600 * 1000); //不足一小时的零头毫秒数
        var minutes = parseInt(oddMillis / (60 * 1000)); //半小时中的分钟数

        // 从事件毫秒差中拿出完整的秒数
        oddMillis = millisDiffer % (60 * 1000); //不足一分钟的零头毫秒数
        var seconds = Math.round(oddMillis / 1000); //4.5秒按5秒算 4.4秒按4秒算

        // 组装字符串【xx天xx小时xx分xx秒】并返回给调用者
        return `${days}天${hours}小时${minutes}分${seconds}秒`;
      }

      // console.log(
      //   getTimeDiffer(new Date(2022,6,1))
      // );

      btn.onclick = function () {
        // 设置目标时间
        var targetDate = new Date(2022, 6, 1);

        // 设置周期性执行的定时器
        window.setInterval(function () {
          // 每秒重新计算一下当前时间与目标时间的时间差（显示为xx天xx小时xx分xx秒）
          var latestTimeDiffer = getTimeDiffer(targetDate);

          // 将时间差显示在P标签身上
          pCountDown.innerText = latestTimeDiffer;
        }, 1000);
      };
    </script>
  </body>
</html>
